const { remote } = require('electron');
const mainProcess = remote.require('./main.js');

const pageSize = 24;

let {vm_menus} = require('./models/menus');
let {MenuItem} = require('./components/menu_item')

let {ContentItem} = require('./components/content_item');
let {CommentItem} = require('./components/comment_item');

let {vm_cmds} = require('./models/cmds');
let {CmdItem} = require('./components/cmd_item');

let menuSection = new Vue({
  el: '#menu-section',
  data: {
    menus: vm_menus
  },
  components:{
    'menu-item': MenuItem
  },
  methods:{
    clickMenu: function(menu){
      if(menu.isSelected == false){
          reloadContents(menu.name);
      }   
      for(let m of this.menus){
        m.isSelected = false;
      }
      menu.isSelected = true;
    }
  }
});

let terminalSection = new Vue({
  el: '#terminal-section',
  data: {
    cmds: vm_cmds
  },
  components:{
    'cmd-item': CmdItem
  },
  methods:{
    cmdEnter: function(cmd){
      if(cmd.Readonly == false && cmd.Content.trim() !==''){        
        cmd.Readonly = true;
        mainProcess.send(cmd.Content, res => {
          let id = this.cmds.length;
          this.cmds.push({
            Id:id,
            Content: '',
            Readonly: false});
          this.$nextTick(() => {
              document.getElementById('input' + id).focus();
          });
        }, error=>{
          let id = this.cmds.length;
          this.cmds.push({
            Id:id,
            Content: 'error',
            Readonly: true});

          id = this.cmds.length;
          this.cmds.push({
            Id:id,
            Content: '',
            Readonly: false});
          this.$nextTick(() => {
              document.getElementById('input' + id).focus();
          });
        });
      }
    }
  }
});

let listSection = new Vue({
  el: '#list-section',
  data: function() {
    return {
      contents: []
    }
  }, 
  components:{
    'content-item': ContentItem
  },
  methods:{
    clickContent: function(content){ 
      for(let c of this.contents){
        c.selected = false;  
      }
      content.selected = true;
      reloadComments(content.id);
    }
  },
  created: function(){
    reloadContents('all');
  }
});

let commentsSection = new Vue({
  el: '#comment-section',
  data: function(){
    return {
      comments:[],
      haveNoComments: true
    }
  },
  components:{
    'comment-item': CommentItem
  },
});

function reloadContents(type){
  mainProcess.loadContents(type, 1, pageSize, contents => {
    listSection.contents.splice(0, listSection.contents.length);
    for(let c of contents){
      listSection.contents.push({
        id: c.id,
        ico: c.ico,
        name: c.name,
        userId: c.userId,
        text: c.text,
        time: c.time,
        commentInfo: c.commentInfo,
        selected: false,
        no: c.no
      });
    }
    if(listSection.contents.length > 0){
      listSection.contents[0].selected = true;
      reloadComments(listSection.contents[0].id);
    }
  });
}

function reloadComments(id){
  mainProcess.loadComments(id, comments =>{
    commentsSection.comments.splice(0, commentsSection.comments.length);
    for(let c of comments){
      commentsSection.comments.push({
        id: c.id,
        name: c.name,
        no: c.no,
        time: c.time,
        text: c.text,
        ico: c.ico,
        aboutMe: c.aboutMe
      });
    }
    commentsSection.haveNoComments = commentsSection.comments.length === 0;
  });
}
